import React, {Component} from 'react';
import {Row, Col, Form, Table, Breadcrumb, Icon, Steps} from 'antd';
import '../css/orderDetail.css';
import moment from 'moment';
import {storage} from "../value";
import app from '../AppMethod';
import {Consumer} from "../store";

const Step = Steps.Step;

class orderDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            pagination: {
                current: 1
            },
            data: {
                output_id: "",
                output_status: "",
                output_num: "",
                customer_id: "",
                output_money: 0,
                output_need_money: null,
                output_real_money: null,
                output_driver_money: null,
                output_receive_money: null,
                output_back_money: null,
                output_receipt_type: null,
                output_receipt_method: null,
                output_check: "",
                output_logistics_type: "",
                output_logistics: "",
                output_type: "",
                output_check_status: "",
                output_order_time: "",
                output_delivery_time: "",
                output_take_time: "",
                output_take_id: "",
                output_pick_time: null,
                output_pick_end_time: null,
                output_pick_id: null,
                output_match_time: null,
                output_match_id: null,
                output_send_time: null,
                output_send_id: null,
                output_follow_id: "",
                output_express_no: null,
                output_express_type: null,
                stock_id: "",
                car_id: null,
                car_recommend_sort: null,
                car_custom_sort: null,
                output_sale_num: null,
                output_package: null,
                output_single: null,
                output_real_package: null,
                output_real_single: null,
                output_match_package: null,
                output_match_single: null,
                output_receive_name: "",
                output_receive_address: "",
                output_receive_mobile: "",
                output_is_urgent: "",
                output_is_back: "",
                output_is_change: "",
                output_creator: "",
                output_createtime: "",
                output_updatetime: "",
                output_isable: "",
                car_num: null,
                car_start_time: null,
                car_expect_time: null,
                car_back_time: null,
                car_status: null,
                output_follow_name: "",
                output_follow_phone: "",
                output_take_name: "",
                output_take_phone: "",
                output_pick_name: null,
                output_pick_phone: null,
                output_match_name: null,
                output_match_phone: null,
                output_send_name: null,
                output_send_phone: null,
                car_follow_name: null,
                car_follow_phone: null,
                output_detail: [
                    {
                        output_detail_id: "",
                        output_id: "",
                        output_detail_goods_name: "",
                        output_detail_goods_id: "",
                        output_detail_money: null,
                        output_detail_price: null,
                        output_detail_num: null,
                        output_detail_standard: "",
                        output_detail_package: null,
                        output_detail_real_package: null,
                        output_detail_single: null,
                        output_detail_real_single: null,
                        output_detail_creator: "",
                        output_detail_createtime: "",
                        output_detail_isable: ""
                    }
                ]
            }
        }
    };

    columns = [
        {
            title: '商品名',
            dataIndex: 'storage_detail_goods_name',
            align: 'center'
        },
        {
            title: '预计件数',
            dataIndex: 'storage_detail_package',
            align: 'center'
        },
        {
            title: '实际件数',
            dataIndex: 'storage_detail_real_package',
            align: 'center'
        },
        {
            title: '预计散包数',
            dataIndex: 'storage_detail_single',
            align: 'center'
        },
        {
            title: '实际散包数',
            dataIndex: 'storage_detail_real_single',
            align: 'center'
        }
    ];

    render() {
        return (
            <div style={{fontFamily: 'PingFang SC Regular, PingFang SC'}}>
                <div style={{background: '#fff'}}>
                    <div style={{paddingBottom: '15px', paddingTop: '20px'}}>
                        <Row style={{fontSize: '18px', color: '#272727'}}>
                            <Icon type="team" style={{color: '#009dff', fontSize: '22px'}}></Icon>
                            <span style={{
                                marginLeft: '20px',
                                fontWeight: 'bold'
                            }}>订单号：{this.state.data.storage_num}</span>
                        </Row>
                        <Row style={{marginTop: '20px', fontSize: '14px'}}>
                            <Col offset={1} span={5}>厂家：{this.state.data.storage_factory}</Col>
                            <Col span={6}>下单日期：{this.state.data.storage_order_time}</Col>
                            <Col span={6}>状态：
                                {
                                    this.state.data.storage_status == 0 ? "待入库" : ""
                                }
                                {
                                    this.state.data.storage_status == 1 ? "已入库" : ""
                                }
                                {
                                    this.state.data.storage_status == 2 ? "已过账" : ""
                                }
                            </Col>
                            <Col span={6}>预计来货日期：{this.state.data.storage_time}</Col>
                        </Row>
                        <Row style={{marginTop: '10px', fontSize: '14px'}}>
                            <Col offset={1} span={5}>实际来货时间：{this.state.data.storage_real_time}</Col>
                            <Col span={6}>收货人：{this.state.data.storage_receive_name}</Col>
                            <Col span={6}>卸货人：{this.state.data.storage_unload_name}</Col>
                        </Row>
                    </div>
                    <Row>
                        <Col span={1} style={{
                            height: '35px',
                            textAlign: 'center',
                            color: '#1890FF',
                            borderBottom: '2px solid #1890FF'
                        }}>详情</Col>
                    </Row>
                </div>
                <div style={{margin: '24px 16px', paddingTop: 30, background: '#fff'}}>
                    <Row className="progress" style={{fontSize: '18px', color: '#272727'}}>
                        数量金额
                    </Row>
                    <Row className="orderTakers">
                        <Col span={4}>预计金额：<span>{this.state.data.storage_money}</span></Col>
                        <Col span={4}>实际金额：<span>{this.state.data.storage_real_money}</span></Col>
                        <Col span={4}>预计件数：<span>{this.state.data.storage_package}</span></Col>
                        <Col span={4}>实际件数：<span>{this.state.data.storage_real_package}</span></Col>
                        <Col span={4}>预计散包数：<span>{this.state.data.storage_single}</span></Col>
                        <Col span={4}>实际散包数：<span>{this.state.data.storage_real_single}</span></Col>
                    </Row>
                </div>
                <div style={{margin: '24px 16px', paddingTop: 30, background: '#fff'}}>
                    <Row className="progress" style={{fontSize: '18px', color: '#272727'}}>
                        商品详情
                    </Row>
                    <Row style={{paddingLeft: '24px', paddingRight: '24px', paddingBottom: '40px', marginTop: '20px'}}>
                        <Table
                            columns={this.columns}
                            dataSource={this.state.data.dataSet}
                            rowKey={record => record.storage_detail_id}
                            //rowKey={(record,index)=>index}
                            pagination={false}
                            loading={this.state.loading}
                        />
                    </Row>
                </div>
            </div>
        )
    };

    componentDidMount() {
        const {dispatch} = this.props;
        dispatch({menuType: "入库详情"});
        this.handleGetDetailById();
    };

    /**
     * 根据id获取入库单详情
     */
    handleGetDetailById() {
        let id = this.props.match.params.id;
        app.post(storage.SEARCH_STORAGEDETAIL, {storage_id: id}).then((result) => {
            if (result.code === 1) {
                let data = result.data;
                data.storage_time = data.storage_time === null ? "" : moment(data.storage_time).format('YYYY-MM-DD');
                data.storage_real_time = data.storage_real_time === null ? "" : moment(data.storage_real_time).format('YYYY-MM-DD HH:mm:ss');
                data.storage_order_time = data.storage_order_time === null ? "" : moment(data.storage_order_time).format('YYYY-MM-DD');
                this.setState({data});
            } else {
                app.alert(result.msg);
            }
        })
    }

};


const OrderDetails = Form.create()(orderDetail);
export default prop => (
    <Consumer>
        {
            props => (
                <OrderDetails {...prop} {...props}/>
            )
        }
    </Consumer>
);